<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0px;
        top: 0px;
        background: red;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <script>
      // 动画帧
      // var count = 0;
      // function fn() {
      //     // setTimeout(function () {

      //     // fn();
      //     count++;
      //     if (count % 20 == 0) {
      //         var ele = document.querySelector(".box");
      //         var num = parseInt(getComputedStyle(ele)['left']);
      //         num += 10;
      //         ele.style.left = num + "px";
      //     }
      //     window.requestAnimationFrame(fn);
      //     // }, 1000);
      // }
      // fn();

      // var num = 0;
      // setInterval(function(){
      //     num++;
      //     document.title = num;
      // }, 1000);
      //  var num = 0;
      // function fn(){
      //     document.title = num;
      //     num++;
      //     requestAnimationFrame(fn);
      // }
      // fn();

      // 动画函数改成 动画帧
      function move(ele, target, dir, cb) {
        function fn() {
          var num = parseInt(getComputedStyle(ele)[dir]);
          if (target == 0) {
            cb && cb();
          } else {
            if (target > 0) {
              num += 1;
              target -= 1;
            } else {
              num += 1;
              target += 1;
            }
            ele.style[dir] = num + "px";
            requestAnimationFrame(fn);
          }
        }
        fn();
      }

      var boxEle = document.querySelector(".box");
      // 回调地狱；：回调函数出现层层嵌套；
      move(boxEle, 300, "left", function () {
        move(boxEle, -300, "left");
      });
    </script>
  </body>
</html>
